<template>
<div>
  姓: <input v-model="firstName"> </input>
  名: <input v-model="lastName"> </input>
  <div>
    全名:{{fullName}}
  </div>
  <button @click="changeName">changeName</button>
</div>
</template>

<script setup lang="ts">
import {ref,computed} from "vue";

let firstName = ref('张')
let lastName = ref('三')

//选项式写法(既能get又能set)
let fullName = computed<string>({
  get(){
    return firstName.value + '-' +  lastName.value
  },
  set(v){
    // console.log(v.split('_'))
    [firstName.value,lastName.value] = v.split('_')
  }
})
//函数式写法(只能get,无法set)
// let fullName = computed(() => {
//   return firstName.value + '-' + lastName.value
// })
const changeName = () => {
  fullName.value = 'zhou_123'
}
</script>

<style scoped>

</style>